<template>
    <div class="list">
        <el-card>
            <el-container>
                <el-header>
                    <span >车库名：</span>
                    <el-input v-model="pageSearch.clauses[0].value" :clearable="true" class="searchInput" placeholder="输入车库名"></el-input>
                    <span style="margin-left: 10px">地区：</span>
                    <el-input v-model="pageSearch.clauses[1].value" :clearable="true" class="searchInput" placeholder="输入地址"></el-input>
                    <span style="margin-left: 15px">车库种类：</span>
                    <el-select v-model="pageSearch.clauses[2].value" :value="pageSearch.clauses[2].value"
                               style="width: 130px"
                               :clearable="true"
                               placeholder="选择种类">
                        <el-option  v-for="item in parkingSortOption"
                                    :key="item.id"
                                    :label="item.valueDesc"
                                    :value="item.id"></el-option>
                    </el-select>
                    <span style="margin-left: 15px">车库状态：</span>
                    <el-select v-model="pageSearch.clauses[3].value" :value="pageSearch.clauses[3].value"
                               style="width: 130px"
                               :clearable="true"
                               placeholder="选择状态">
                        <el-option  v-for="item in parkingStatusOption"
                                    :key="item.id"
                                    :label="item.valueDesc"
                                    :value="item.id"></el-option>
                    </el-select>
                    <span style="margin-left: 15px">是否营业：</span>
                    <el-select v-model="pageSearch.clauses[4].value" :value="pageSearch.clauses[4].value"
                               style="width: 90px"
                               :clearable="true">
                        <el-option v-for="item in isBusinessOption"
                                    :key="item.id"
                                    :label="item.valueDesc"
                                    :value="item.id"></el-option>
                    </el-select>
                    <el-button style="float: right" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button style="float: right;margin-right: 15px" type="success" icon="el-icon-circle-plus" @click="addParking">添加车库</el-button>
                </el-header>
                <el-main>
                    <el-table
                            ref="parkingTable"
                            :data="tableData"
                            :header-cell-style="tableHeader"
                            height="550px"
                            border>
                        <el-table-column
                                type="index"
                                width="60"
                        > </el-table-column>
                        <el-table-column
                                prop="id"
                                label="id"
                                width="150"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="parkingName"
                                label="车库名"
                                width="180"
                                :show-overflow-tooltip="true"
                        >
                        </el-table-column>
                        <el-table-column label="车库图片" align="center">
                            <template slot-scope="scope">
                                <img :src="domain+scope.row.picIds" style="width: 60px;height: 50px">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="parkingSortName"
                                label="车库种类"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="parkingStatusName"
                                label="车库状态"
                                width="100">
                            <template slot-scope="scope">
                                <span v-if='scope.row.parkingStatusName==="正常"' >{{scope.row.parkingStatusName}}</span>
                                <span v-else-if='scope.row.parkingStatusName==="空闲"' style="color: green">{{scope.row.parkingStatusName}}</span>
                                <span v-else style="color: red">{{scope.row.parkingStatusName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="isBusiness"
                                label="是否营业"
                                width="100"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.isBusiness===17">是</span>
                                <span v-else style="color: red">否</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="carPlaceNum"
                                label="车位数目"
                                width="100"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="parkingPhone"
                                label="车库电话"
                                width="120"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="location"
                                label="地址"
                                :show-overflow-tooltip="true"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="车库管理员"
                                width="100"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="isUsed"
                                label="是否启用"
                                width="100"
                        >
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.isUsed===1" @click="isUsedChange(scope.row)" size="mini" type="danger" >停止使用</el-button>
                                <el-button v-if="scope.row.isUsed===0" @click="isUsedChange(scope.row)" size="mini" type="primary">上线使用</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                fixed="right"
                        >
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="ShouldDetail(scope.row)">详情</el-button>
                                <el-button type="text" size="mini" @click="Edit(scope.row)">修改</el-button>
                                <el-button
                                        size="mini"
                                        type="text"
                                        @click="deleteParking(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer style="height: 30px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSearch.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-footer>
                <ParkingDetail :isVisiblePro="visible"
                               :parkingData="parkingData"
                               :title="title"
                               :parkingSortOption="parkingSortOption"
                               :parkingStatusOption="parkingStatusOption"
                               :isBusinessOption="isBusinessOption"
                               :disabled=disabled
                               @cancel="visible=false"
                >
                </ParkingDetail>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    import Message from '../../components/messages/index'
    import ParkingDetail from './ParkingDetail'
    import Config from  '../../config'
    export default {
        name: "parkingList",
        components: {ParkingDetail},
        data(){
            return{
                tableHeader:{
                    "background-color":"#DCDFE6",
                        "height":"20px"
                },
                domain:Config.domain,
                disabled:false,
                title:"",
                tableData:[],
                parkingData:{},
                parkingSortOption:[],
                parkingStatusOption:[],
                isBusinessOption:[],
                parkingIdOfUser:[],
                visible:false,
                total:null,
                pageSearch:{
                    pageSize:10,
                    pageNum:1,
                    clauses:[{
                        column:"parkingName",
                        operation:"like",
                        value:"",
                    },{
                        column:"location",
                        operation:"like",
                        value:"",
                    }, {
                        column:"parkingSortCode",
                        operation:"=",
                        value:null,
                    },{
                        column:"parkingStatusCode",
                        operation:"=",
                        value:null,
                    },{
                        column:"isBusiness",
                        operation:"=",
                        value:null,
                    },{
                        column: "id",
                        operation: "in",
                        value: null,
                    }],
                    sortMap:{
                        isUsed:"DESC",
                        createDatetime:"DESC"
                    }
                },
            }
        },
        methods:{
            addParking(){
              this.$router.push({  path: '/parking/edit' })
            },
            ShouldDetail(val){
                this.parkingData=val;
                this.title="车库详情";
                this.disabled=true;
                this.visible=true;
            },
            isUsedChange(val){
                let self = this;
                self.$http.post("parking/checkParking",val).then((res)=>{
                    if(res.status===200){
                        let message = res.data.message;
                        if(res.data.isUsed===true){
                            switch (val.isUsed) {
                                case 0:
                                    val.isUsed=1;
                                    self.$http.post("parking/update",val).then((res)=>{
                                        if(res.status===200){
                                            Message.success(message);
                                        }
                                    });
                                    break;
                                case 1:
                                    val.isUsed=0;
                                    self.$http.post("parking/update",val).then((res)=>{
                                        if(res.status===200){
                                            Message.success(message);
                                        }
                                    });
                                    break
                            }
                        }else{
                            Message.warning(message);
                        }
                    }
                });
            },
            Edit(val){
                this.parkingData=val;
                this.title="车库信息修改";
                this.disabled=false;
                this.visible=true;
            },
            deleteParking(parking){
                Message.confirm2("将同时删除车库车位，确认删除？","warning").then(()=>{
                    this.$http.post("parking/checkParkingDelete",parking).then((res)=>{
                        if(res.status===200){
                            if(res.data.isDelete===true){
                                this.$http.get("parking/delete/"+parking.id).then((res)=>{
                                    if(res.status===200){
                                        // Message.info("刪除成功！");
                                        this.$notify({
                                            message: '车库删除成功',
                                            type: 'success'
                                        });
                                        this.getParkingList();
                                    }
                                });
                                this.$http.get("carPlace/deleteCarPlaceByParkingId/"+parking.id).then((res)=>{
                                    if(res.status===200){
                                        // Message.info("刪除成功！");
                                        this.$notify({
                                            message: res.data,
                                            type: 'success'
                                        });
                                        this.getParkingList();
                                    }
                                })
                            }else{
                                Message.warning(res.data.message);
                            }
                        }
                    });
                })
            },
            handleSizeChange(val){
                this.pageSearch.pageSize=val;
                this.getParkingList();
            },
            handleCurrentChange(val){
                this.pageSearch.pageNum=val;
                this.getParkingList();
            },
            search(){
                this.pageSearch.pageNum=1;
                this.getParkingList();
            },
            getParkingList(){
                this.$http.post("parking/getParkingVOList",this.pageSearch).then(res=>{
                    if(res.status===200){
                        this.tableData=res.data.list;
                        this.total=res.data.total;
                    }
                });
            },
            getSelectOption(){
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"parkingSortCode"}).then(res=>{
                    if(res.status===200){
                        this.parkingSortOption=res.data
                    }
                });
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"parkingStatusCode"}).then(res=>{
                    if(res.status===200){
                        this.parkingStatusOption=res.data
                    }
                });
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"isBusiness"}).then(res=>{
                    if(res.status===200){
                        this.isBusinessOption=res.data
                    }
                });
            },
            dateFormat(row,column){
                let date=row[column.property];
                if (date === undefined) {
                    return "";
                }
                return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
            },
            initList(){
                let userId = JSON.parse(localStorage.getItem('user'));
                if(userId.roleId===2){//如果为车库管理员
                    this.$http.get("/parking/getParkingOfUser/"+userId.id).then((res)=>{
                        if(res.status===200){
                            for(let i=0;i<res.data.length;i++){
                                this.parkingIdOfUser.push(res.data[i].id);
                            }
                            this.pageSearch.clauses[5].value=this.parkingIdOfUser;
                            this.getParkingList();
                        }
                    })
                }else if(userId.roleId===1){//如果为总管理员
                    this.getParkingList();
                }

            },
        },
        mounted() {
            this.getSelectOption();
            this.initList();

        },
        comments:{ParkingDetail}
    }
</script>

<style scoped lang="less">
    .list{
        width: 100%;
        height: calc(~'100vh - 100px');
        color: #606266
    }
    .searchInput{
        width:140px;
        margin-left: 10px;
    }
</style>